<template>
  <div class="uListContainer" :style="{minHeight:screenHeight}">
      <!-- 搜索框 -->
      <div class="top">
           <yl-search :submit="search" :ylstyle=" searchStyle" style="position:fixed;z-index:100;width:100%"></yl-search>
      </div>
        <!-- 列表 -->
        <!-- <yd-infinitescroll :callback="loadList" class="ulist"> -->
          <yd-infinitescroll :callback="loadList"  class="list" ref="ulist">
               <div slot="list" :list="list" >
                <div class="top">
                    <div class="left">
                        <img src="./img/latest.png">
                    </div>
                    <div class="mid">
                        <p v-if="status.name">{{status.name}}</p>
                        <p v-if="status.groupname">{{status.groupname}}</p>
                        <span v-if="status.number&&status.number!==0">{{status.number}}人在线</span>
                    </div>
                    <div class="right" @click="invite()">
                        邀请好友
                    </div>
                </div>
                <!-- 群成员列表 -->
                <div class="listDetail" v-for="(item,index) in list" :key="index" @click="listClick(index)">
                    <div class="left">
                        <img :src="item.user.photo">
                    </div>
                    <div class="mid">
                        <p>{{item.user.name}}</p>
                        <!-- <span>{{item.uMsg}}</span> -->
                    </div>
                    <div class="right">
                        <!-- {{item.msgTime}} -->
                        <span v-if="item.status">群主</span>
                    </div>
                </div>
               </div>
          </yd-infinitescroll>
  </div>
</template>
<script>
import ylSearch from '@/components/search'
import ylList from '@/components/list'
export default {
    data(){
        return{
            searchStyle:{
                height:'0.9',//高度，必须
                bgcolor:'#EF8356',//背景，可选
                remind:'搜索想找的人',//placeholder可选
                close:true, //开关 可选
            },
            ucircle:{
                name:'我的群',
                online:'23'
            },
            list: [],
            screenHeight:document.body.clientHeight+"px",
            online:'23',
            distance:'300'
        }
    },
    computed:{
        status(){
            if(this.$store.state.choseGroup!==null){
                return this.$store.state.choseGroup
            }else{
                return []
            }
        }
    },
    components:{
        ylSearch,ylList
    },
  methods:{
    search(e){//搜索
        e.preventDefault();
    },
    loadList(){//滚动到底部事件
        // alert("莫滚了，莫得了，你滚啥")
        this.$refs.ulist.$emit('ydui.infinitescroll.finishLoad');
    },
    listClick(index){//点击用户头像事件
        let data={
            userId:this.list[index].userID//群成员ID
        }
        this.ylAjax.searchFriendbyId(data)
                .then(res=>{
                        if(res.state==0){
                            this.$store.commit("userDetail",res.data)
                                        // this.$router.push({path:"/common/userIntr",query:{status:"handel",srcuser:this.list[index]}})
                            this.$router.push({path:'/common/userIntr',query:{status:'msg'}})
                        }else{
                            this.$dialog.alert({mes:res.message})
                        }
                })
                    .catch(error=>{
                        throw error
                })
    },
    focusList(){

    },
    friendList(){//好友分组内成员
        let data={
            userId:localStorage.userid,
            groupID:this.status.id
        }
        this.ylAjax.showGroupDetail(data)
                  .then(res=>{
                      if(res.state==0){
                           console.log(res.data[0].groupMembers)
                        //    this.ucircle.name=res.data[0].name
                        //    this.ucircle.online=res.data[0].groupMembers.length;
                           let a=res.data[0].groupMembers;
                           let b;//此处数组骚操作
                           for(let i=0;i<a.length;i++){
                               if(a[i].status==true){
                                   b=a[i]
                                   a.splice(i,1)
                                   break
                               } 
                           }
                           a.unshift(b);
                           this.list=a;
                           
                      } 
                  })
                  .catch(err=>{
                      throw error
                  })
    },
    focusList(){//关注分组内成员
        let data={
            userId:localStorage.userid,
            groupID:this.status.id
        }
        this.ylAjax.showGroupMember(data)
                    .then(res=>{
                        if(res.state==0){
                            if(res.data[0]){
                                let a=res.data[0].attentionGroupMembers;
                                this.list=a;   
                            }
                                                  
                        }
                    })
                    .catch(error=>{
                        throw error
                    })
    },
    listLoad(){//查询用户列表 
            if(this.status.type=="friend"){
                this.friendList()
            }else if(this.status.type=="focus"){
                this.focusList()
            }
        },
    invite(){//邀请好友
    let a
    if(this.status.type=="friend"){
     a={
        groupId:this.$store.state.choseGroup.id,
        type:"some",
        methods:'friend'
        }
    }else if(this.status.type=="focus"){
        a={
            groupId:this.$store.state.choseGroup.id,
            type:"some",
            methods:'focus'        
        }
    }
            this.$store.commit('invitaObj',a)
            this.$router.push({name:'invitaList'})
    }
  },
  mounted(){
      this.listLoad()
  }
}
</script>

<style lang="less" scoped>
@import "~less/base";
.uListContainer{
    position: absolute;
    top: 0;
    width: 100%;
    background-color: @home-bg;
    .top{//顶部
        height: 1rem;
    }
    .list{//列表
        .top,.listDetail{//公共样式
            display: flex;
            padding: .1rem 0;
            height: 1.22rem;
            border-bottom: 1px solid  @color-border4;
            .left{
                flex: 0 0 20%;
                img{
                    width:1rem;
                    border-radius: 50%;
                    border:1px solid @color-border5;
                    padding: .2rem;
                    margin-left: .2rem;
                }
            }
            .mid{
                flex: 0 0 60%;
                p{
                    line-height: .5rem;
                }
                span{
                    position: absolute;
                    color:@color-c2;
                }
            }
            .right{
                flex: 0 0 20%;
            }
        }
        .listDetail{//用户列表
            .left{
                img{
                    width: 1rem;
                    border: .04rem solid @color-border4;
                    padding: 0;
                }
            }
        }
    }
}
</style>
